<template>
  <view class="main">
    <!-- <view style="color: white; font-size: 40rpx; margin: 40rpx;">患者管理</view> -->
    <view class="mainBg"></view>
    <view class="main-head">
      <image class="titleText" src="/static/images/newIndex/title2.png"></image>
      <image v-if="isLogin()" class="titleAdd" src="/static/images/newIndex/add.png"  @click="edit('')"></image>
    </view>
    <view class="main-container">
      <view v-if="isLogin()">
        <!-- <tui-searchbar></tui-searchbar> -->
        <view class="searchBox">
          <image src="/static/images/newIndex/search.png"></image>
          <input
            type="text"
            placeholder="请输入搜索关键词"
            v-model="searchValue"
            @confirm="handleSearch"
          />
          <text @click="handleSearch">搜索</text>
        </view>
        <!-- <view class="addButton" @click="add">
          <image src="/static/images/newIndex/add.png"></image>
          <text>添加患者</text>
        </view> -->
        <view
          class="list-card"
          v-for="(item, index) in patientLists"
          :key="item.id || index"
          :index="index"
        >
          <view class="card-head">
            <view class="card-head-L">
              <view class="card-head-text">
                <text class="card-h-tName">ID：</text>
                <text class="card-h-tCon">{{ item.id }}</text>
              </view>
              <view class="card-head-text">
                <text class="card-h-tName">病案号：</text>
                <text class="card-h-tCon">{{
                  item.medical_record_number
                }}</text>
              </view>
            </view>
          </view>
          <view class="card-headBg"></view>
          <view class="card-info">
            <view class="card-info-text">
              <text class="card-c-textL">姓名：</text>
              <text class="card-c-textR">{{ item.name }}</text>
            </view>
            <view class="card-info-text">
              <text class="card-c-textL">性别：</text>
              <text class="card-c-textR">{{
                item.gender == 1 ? "男" : "女"
              }}</text>
            </view>
            <view class="card-info-text">
              <text class="card-c-textL">身高(cm)：</text>
              <text class="card-c-textR">{{ item.height }}</text>
            </view>
            <view class="card-info-text">
              <text class="card-c-textL">体重(kg)：</text>
              <text class="card-c-textR">{{ item.weight }}</text>
            </view>
          </view>
          <view class="card-container">
            <view class="card-c-text">
              <text class="card-c-textL">所属研究中心：</text>
              <text class="card-c-textR">{{ item.hospital_id_text }}</text>
            </view>
            <view class="card-c-text">
              <text class="card-c-textL">救治医院名称：</text>
              <text class="card-c-textR">{{ item.hospital_name }}</text>
            </view>
            <view class="card-c-text">
              <text class="card-c-textL">治疗模式：</text>
              <text class="card-c-textR">{{ item.treatment_mode }}</text>
            </view>
          </view>
          <view class="card-ope">
            <image
              src="/static/images/newIndex/ope_edit.png"
              @click="edit(item.id)"
            ></image>
            <image src="/static/images/newIndex/ope_del.png" @click="deletePatient(item.id)"></image>
          </view>
        </view>
        <!-- <tui-form-button
        @click="add"
        style="margin-top: 20rpx; margin-bottom: 20rpx"
        background="#FFFFFF"
        color="#3E79DC"
        ><tui-icon name="add-fill" color="#3E79DC"></tui-icon
        >&nbsp;添加患者</tui-form-button
      > -->

        <!-- <tui-list-cell v-for="(item, index) in patientLists" :index="index">
        <tui-card :title="item.title" :tag="item.tag">
          <template v-slot:body>
            <view
              style="
                background-color: #3287e7;
                padding-left: 26rpx;
                padding-right: 26rpx;
                border-radius: 6rpx;
                display: flex;
                flex-direction: row;
              "
            >
              <view
                style="
                  color: whitesmoke;
                  flex: 1;
                  padding-top: 14rpx;
                  padding-bottom: 14rpx;
                "
              >
                <view style="line-height: 52rpx"> 姓名：{{ item.name }} </view>
                <view style="line-height: 52rpx">
                  性别：{{ item.gender == 1 ? "男" : "女" }}
                </view>
                <view style="line-height: 52rpx">
                  身高(cm)：{{ item.height }}
                </view>
                <view style="line-height: 52rpx">
                  体重(kg)：{{ item.weight }}
                </view>
              </view>
            </view>
            <view
              style="
                background-color: #ffffff;
                padding-left: 26rpx;
                padding-right: 26rpx;
                border-radius: 6rpx;
                display: flex;
                flex-direction: row;
              "
            >
              <view
                style="
                  color: #000000;
                  flex: 1;
                  padding-top: 14rpx;
                  padding-bottom: 14rpx;
                "
              >
                <view style="line-height: 52rpx">
                  <span style="color: #999999">所属研究中心</span>：{{
                    item.hospital_id_text
                  }}
                </view>
                <view style="line-height: 52rpx">
                  <span style="color: #999999">救治医院名称</span>：{{
                    item.hospital_name
                  }}
                </view>
                <view style="line-height: 52rpx">
                  <span style="color: #999999">治疗模式</span>：{{
                    item.treatment_mode
                  }}
                </view>
              </view>
            </view>
            <view class="tui-default">
              <view style="display: flex; line-height: 60rpx">
                <tui-form-button
                  style="margin-left: 10rpx"
                  v-on:click="edit(item.id)"
                  size="28"
                  background="#EBF0FF"
                  color="#6997E5"
                  radius="8px"
                  >编辑</tui-form-button
                >
                <tui-form-button
                  style="margin-left: 10rpx"
                  size="28"
                  background="#FFEAEA"
                  color="#EC1D1D"
                  radius="8px"
                  >删除</tui-form-button
                >
              </view>
            </view>
          </template>
        </tui-card>
      </tui-list-cell> -->
      </view>
    </view>
    <view class="container" v-if="!isLogin()">
      <view class="tip-text">暂无内容，请登录后查看</view>
      <button class="login-btn" @click="goToLogin">登录</button>
    </view>

    <tui-nomore text="没有更多数据了" v-if="noMoreData"></tui-nomore>
  </view>
</template>

<script>
import { isLogin } from "@/common/util.js";

import tuiListView from "@/components/thorui/tui-list-view/tui-list-view.vue";
import tuiCard from "@/components/thorui/tui-card/tui-card.vue";
import tuiSearchbar from "@/components/thorui/tui-searchbar/tui-searchbar.vue";

export default {
  components: {
    tuiListView,
    tuiCard,
    tuiSearchbar,
  },
  data() {
    return {
      page: 1,
      size: 10,
      patientLists: [],
      searchValue: "",
      noMoreData: false,
    };
  },
  onShow() {
    // 页面显示时刷新数据，确保从其他页面返回时数据是最新的
    this.page = 1;
    this.noMoreData = false;
    this.loadData();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.noMoreData = false;
    this.loadData();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (this.noMoreData) {
      return;
    }
    this.page++;
    this.loadData(true);
  },
  methods: {
    isLogin() {
      return isLogin();
    },
    cardClick(id) {
      uni.navigateTo({
        url: "/pages/patient/injury?id=" + id,
      });
    },
    goToLogin() {
      // 跳转到登录页，假设你的登录页路径是 /pages/login/login
      uni.navigateTo({
        url: "/pages/my/login",
      });

      // 或者使用重定向（关闭当前页）
      // uni.redirectTo({
      //   url: '/pages/login/login'
      // });
    },
    add() {
      uni.navigateTo({
        url: "/pages/patient/detail",
      });
    },
    edit(id) {
      uni.navigateTo({
        url: "/pages/patient/injury?id=" + id,
      });
    },
    // 搜索功能
    handleSearch() {
      if (!this.searchValue.trim()) {
        // 如果搜索关键词为空，重新加载所有数据
        this.loadData();
        return;
      }
      
      this.page = 1;
      this.noMoreData = false;
      
      // 调用搜索接口
      this.http
        .get("/api/patient/list?page=" + this.page + "&size=" + this.size + "&keyword=" + encodeURIComponent(this.searchValue))
        .then((res) => {
          if (res.data && res.data.code == 1) {
            this.patientLists = res.data.data;
            if (res.data.data.length < this.size) {
              this.noMoreData = true;
            }
          }
        })
        .catch((err) => {
          uni.showToast({
            title: "搜索失败",
            icon: "none"
          });
        });
    },
    // 加载数据的通用方法
    loadData(isLoadMore = false) {
      const url = this.searchValue.trim() 
        ? "/api/patient/list?page=" + this.page + "&size=" + this.size + "&keyword=" + encodeURIComponent(this.searchValue)
        : "/api/patient/list?page=" + this.page + "&size=" + this.size;
        
      this.http
        .get(url)
        .then((res) => {
          if (res.data && res.data.code == 1) {
            if (isLoadMore) {
              this.patientLists = [...this.patientLists, ...res.data.data];
            } else {
              this.patientLists = res.data.data;
            }
            
            if (res.data.data.length < this.size) {
              this.noMoreData = true;
            }
          }
        })
        .catch((err) => {
          if (isLoadMore) {
            this.page--; // 加载失败时回退页码
          }
        });
    },
    // 删除患者
    deletePatient(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个患者吗？删除后无法恢复。',
        success: (res) => {
          if (res.confirm) {
			  console.log(id)
            this.http.post('/api/patient/delete', { data: {id} })
              .then((response) => {
                if (response.data && response.data.code == 1) {
                  uni.showToast({
                    title: '删除成功',
                    icon: 'success'
                  });
                  // 重新加载数据
                  this.page = 1;
                  this.noMoreData = false;
                  this.loadData();
                } else {
                  uni.showToast({
                    title: response.data.msg || '删除失败',
                    icon: 'none'
                  });
                }
              })
              .catch((error) => {
                uni.showToast({
                  title: '删除失败',
                  icon: 'none'
                });
              });
          }
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  /* height: 100vh; 或其他适当高度 */
  width: 100%;
  /* overflow: auto; */
  padding-top: 80rpx;
  position: relative;
  background: rgba(235, 239, 244, 1);
}
.mainBg {
  background-image: url("/static/images/newIndex/index_bg.png") !important;
  background-size: 100% 100%;
  width: 100%;
  height: 692rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.main-container {
  width: 690rpx;
  margin: 0 auto;
}
.main-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40rpx 40rpx 25rpx;
}
.titleText {
  width: 160rpx;
  height: 44rpx;
}
.titleAdd{
  width: 60rpx;
  height: 60rpx;
}
.searchBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  gap: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 25rpx;
  position: relative;
  z-index: 10;
}
.searchBox image {
  width: 48rpx;
  height: 48rpx;
}
.searchBox input {
  flex: 1;
  border: none;
  background: none;
}

.searchBox text {
  font-weight: 500;
  font-size: 28rpx;
  color: #3e79dc;
}
.addButton {
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  padding: 20rpx 0;
  width: 100%;
  background: #fff;
  margin: 25rpx 0;
}
.addButton image {
  width: 74rpx;
  height: 74rpx;
}
.addButton text {
  font-weight: 500;
  font-size: 32rpx;
  color: #3e79dc;
}
.list-card {
  background: #fff;
  border-radius: 20rpx;
  position: relative;
  width: 100%;
  border-radius: 20rpx;
  height: 100%;
  padding-top: 115rpx;
  background: #f8faff;
  padding-bottom: 20rpx;
  margin-bottom: 35rpx;
  .card-head {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 88rpx;
    width: calc(100% - 52rpx);
    background: linear-gradient(
      to right,
      rgba(62, 121, 220, 1),
      rgba(77, 163, 255, 1)
    );
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 26rpx;
    border-radius: 20rpx 20rpx 0 0;
    .card-head-L {
      display: flex;
      align-items: center;
      gap: 20rpx;
    }
    .card-h-tName {
      font-weight: 400;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.8);
    }
    .card-h-tCon {
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
    .card-head-R {
      display: flex;
      align-items: center;
    }
    .card-h-circle {
      width: 35rpx;
      height: 35rpx;
      border-radius: 50%;
    }
  }
  .card-headBg {
    background: url("/static/images/newIndex/card_bg.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    height: 88rpx;
    width: 100%;
  }
}
.card-info {
  background: linear-gradient( 180deg, #4DAFFF 0%, #1358CB 100%);
  border-radius: 20rpx;
  padding: 20rpx;
  width: 85%;
  margin: 0 auto 20rpx;
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}
.card-info-text {
  display: flex;
  align-items: center;
  gap: 7rpx;
}
.card-info .card-c-textL {
  font-weight: 400;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  width: 120rpx;
}
.card-info .card-c-textR {
  font-size: 28rpx;
  color: #ffffff;
}
.card-container {
  width: 85%;
  margin: 0 auto;
  padding: 20rpx;
  background: #fff;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 25rpx;
  margin-bottom: 25rpx;
}
.card-c-text {
  display: flex;
  align-items: center;
  gap: 5rpx;
}
.card-container .card-c-textL {
  font-weight: 400;
  font-size: 26rpx;
  color: #999999;
  white-space: nowrap;
  width: 200rpx;
  display: block;
}
.card-container .card-c-textR {
  font-weight: 400;
  font-size: 28rpx;
  color: #000000;
  width: 400rpx;
}
.card-ope {
  width: 85%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}
.card-ope image {
  width: 306rpx;
  height: 72rpx;
}
.tui-list-view {
  margin: 0rpx;
}
.tui-list-cell {
  margin: 0rpx;
}
.tui-card {
  margin: 0rpx;
  padding: 6rpx;
}
.tui-default {
  font-size: 32rpx;
  margin: 0rpx 0rpx 0rpx 0rpx;
  padding: 16rpx;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}

.tip-text {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.login-btn {
  width: 200px;
  background-color: #5d76f4;
  color: white;
  border-radius: 5px;
}
</style>
